<template>
  <div class="header">
    <div class="container">
      <div class="left">
        <a href="/">
          <img class="logo" src="@/assets/logo2.jpg" alt="logo">
          <span class="mall-title">商城系统</span>
        </a>
      </div>
      <div class="middle">
        <span class="nav-span" :class="{'active':$route.path === '/'}">
          <router-link class="nav-link" to="/">首页</router-link>
        </span>
        <!-- <span class="nav-span" :class="{'active':$route.path === '/category'}">
          <router-link class="nav-link" to="/category">分类</router-link>
        </span> -->
        <span class="nav-span" :class="{'active':$route.path === '/cart'}">
          <router-link class="nav-link" to="/cart">购物车</router-link>
        </span>
        <span class="nav-span" :class="{'active':$route.path === '/order'}">
          <router-link class="nav-link" to="/order">订单</router-link>
        </span>
        <span class="nav-span" :class="{'active':$route.path === '/admin'}">
          <router-link class="nav-link" to="/admin">后台管理</router-link>
        </span>
      </div>
      <div class="right">
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link nickname">
            <div style="line-height: 50px" v-if="!userinfo">
              昵称
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </div>
            <div style="line-height: 50px" v-if="userinfo">
              {{ userinfo.username }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </div>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <div @click="toLogin">登录</div>
              </el-dropdown-item>
              <el-dropdown-item command="updatePwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <el-dialog title="修改密码" v-model="dialogFormVisible" width="500px">
      <el-form :model="pwdForm" ref="pwdForm" :rules="updatePwdRules" label-width="80px" style="width: 400px">
        <el-form-item label="旧密码" prop="oldPwd">
          <el-input v-model="pwdForm.oldPwd" type="password" autocomplete="off" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="pwdForm.password" type="password" autocomplete="off" clearable show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPwd">
          <el-input v-model="pwdForm.confirmPwd" type="password" autocomplete="off" clearable show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="updatePwd('pwdForm')" type="primary">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {logout} from "@/api/login";
import {ref,reactive} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import {ElMessage} from "element-plus";

const store = useStore()
const router = useRouter()
const dialogFormVisible = ref(false)
const pwdForm = ref({
  oldPwd: '',
  password: '',
  confirmPwd: ''
})
const userinfo = ref({})

const initData = () => {
  userinfo.value = store.state.home.userinfo
}
initData()

const checkedPwd = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== pwdForm.value.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
}

const updatePwdRules = reactive({
  oldPwd: [
    {required: true, message: '旧密码不能为空', onTrigger: 'blur'},
    {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '新密码不能为空', onTrigger: 'blur'},
    {min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur'}
  ],
  confirmPwd: [
    {required: true, validator: checkedPwd, onTrigger: "blur"},
  ]
})

const handleCommand = (command)=>{
  switch (command) {
    case 'updatePwd':
      // 打开修改密码窗口
      handlePwd()
      break;
    case 'logout':
      // 退出系统
      toLogout()
      break;
    default:
      break;
  }
}

const toLogin = ()=>{
  router.push("/login")
}

const toLogout = () => {
  logout()
  router.push("/login")
  ElMessage({
    message: "已退出登录",
    type: "info",
    showClose: true,
  })
}

const resetForm = () => {
  pwdForm.value = {
    oldPwd: '',
    password: '',
    confirmPwd: ''
  }
}

const handlePwd = () => {
  dialogFormVisible.value = true
  resetForm()
}

const updatePwd = () => {
  dialogFormVisible.value = false
}
</script>

<style scoped>
.header {
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
}

.container {
  width: 100%;
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.left {
  display: flex;
  align-items: center;
}

.logo {
  width: 34px;
  height: 34px;
  margin-right: 10px;
}

.mall-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.middle {
  display: flex;
  align-items: center;
}

.nav-span {
  margin: 0 10px;
  position: relative;
}

.nav-link {
  color: #333;
  font-size: 16px;
  padding: 20px 10px;
  display: block;
  text-decoration: none;
}

.nav-span:hover .nav-link, .nav-span.active .nav-link {
  color: #ff6700;
}

.nav-span:hover::after, .nav-span.active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: #ff6700;
}

.right {
  display: flex;
  align-items: center;
}

.el-dropdown {
  color: #333333;
}
.nav-link:hover {
  /* background-color: #e9dbea; */
}
.nickname {
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
}
</style>
